import React from  'react'
import style from '../index.module.scss'
import { register } from '@/common/api'
import makeFriend from '@/assets/login/交友.png'
import {
  Button,
  Form,
  Input,
} from 'antd';
import { useNavigate } from 'react-router-dom'
export default function Register() {
  const navigate = useNavigate()
  const onFinish = async(values) => {
    const res = await register(values)
    if (res.code === 200) {
        navigate('/login')
    }
  };
  // 校验用户名
  const valiDatateName = (_, value) => {
    if (!value) {
      return Promise.reject(new Error('请输入用户名！'));  
    }
    return Promise.resolve();  
  }
// 校验账号
  const valiDatateUsername = (_, value) => {
    if (!value) {
      return Promise.reject(new Error('请输入账号！'));  
    }
    if (!value || !/^\d{11}$/.test(value)) {  
      return Promise.reject(new Error('请输入至少11位数的账号！'));  
    }  
    return Promise.resolve();  
  }
  // 校验密码
  const valiDatatePwd = (_, value) => {
    if (!value) {  
      return Promise.reject(new Error('请输入密码！'));  
    } 
    if (!value || !/^[0-9a-zA-Z]{6,12}$/.test(value)) {  
      return Promise.reject(new Error('请输入6-12位数的密码！'));  
    }  
    return Promise.resolve();  
  }
  return (
    <>
      <div className={style.login}>
      <div className={style.loginTop}>
        <div className={style.title}>
          <img src={makeFriend} alt="" /><p>趣纷享</p>
        </div>
      <Form
          name="basic"
          onFinish={onFinish}
          autoComplete="off"
          >
            <Form.Item
             name="name"
            rules={[
              {
                validator: valiDatateName,
              },
            ]}
          >
            <Input placeholder='请输入用户名' />
          </Form.Item>
          <Form.Item
          name="username"
          
            rules={[
              {
                validator: valiDatateUsername,
              },
            ]}
          >
            <Input placeholder='请输入账号' />
          </Form.Item>
          <Form.Item
            name="password"
            rules={[
             {validator:valiDatatePwd}
            ]}
          >
            <Input.Password placeholder='请输入密码' />
          </Form.Item>
          <Form.Item
          >
            <Button type="primary" htmlType="submit">
              立即注册
            </Button>
        </Form.Item>
        </Form>
        </div>
      <div className={style.bgc}>
      </div>
    </div>
    </>
  )
}
